<script lang="ts" setup>
import type { FormInstance } from '@arco-design/web-vue'
import { Message } from '@arco-design/web-vue'
import { SellRecordApi } from '@/apis'
import { useForm } from '@/hooks'

const emits = defineEmits(['ok'])

const visible = ref<boolean>(false)

const sellRecordId = ref<string>('')
const sellFormRef = ref<FormInstance>()
const { form, resetForm } = useForm({
  remark: '',
  valid: true,
})

const beforeOk = async () => {
  const isInvalid = await sellFormRef.value?.validate()
  if (isInvalid) {
    return
  }
  try {
    await SellRecordApi.update({ ...form }, sellRecordId.value)
    Message.success('更新成功')
    return true
    // eslint-disable-next-line unused-imports/no-unused-vars
  } catch (_) {
    return false
  }
}

const handleOk = async () => {
  emits('ok')
}

const handleCancel = () => {
  visible.value = false
}
const reset = () => {
  sellFormRef.value?.resetFields()
  resetForm()
}

const open = (id: string, record: any) => {
  reset()
  console.log({ record })
  sellRecordId.value = id
  form.valid = record.valid
  form.remark = record.remark
  visible.value = true
}

defineExpose({
  open,
})
</script>

<template>
  <a-modal v-model:visible="visible" title="更新销售顾问业绩" @before-ok="beforeOk" @ok="handleOk" @cancel="handleCancel">
    <a-form ref="sellFormRef" :model="form" layout="vertical">
      <div class="content">
        <div class="grid-item">
          <a-form-item label="备注" field="remark">
            <a-textarea v-model.trim="form.remark" />
          </a-form-item>
        </div>
        <div class="grid-item">
          <a-form-item label="是否有效" field="valid">
            <DictSelect v-model="form.valid" type="boolean" />
          </a-form-item>
        </div>
      </div>
    </a-form>
  </a-modal>
</template>

<style lang='less' scoped></style>
